import Vue from 'vue'
import Vuex from 'vuex'
import { getConfig } from '../api/config';

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        backgroundUrl: '',
        items: [],
        tabbarItems: [],
        // 当前处于的页面序号，null为桌面
        activeIndex: null,
        // 是否显示launch
        launchActive: true,
        // 是否弹起tabbar
        tabbarActive: true,
        // 是否正在拖拽
        dragActive: false,
        tabbarElement: null,
        tabbarAttribute: {
            container: null, // DOMRect
            items: [] // 注意这个items是tabbar中的所有child，也包括第一个launch。所以这个items的length比tabbarItems.length多一个
        },
    },
    mutations: {
        SWITCH_LAUNCH_ACTIVE(state, active) {
            state.launchActive = active;
        },
        SWITCH_TABBAR_ACTIVE(state, active) {
            state.tabbarActive = active;
        },
        SWITCH_DRAG_ACTIVE(state, active) {
            state.dragActive = active;
        },
        SET_BACKGROUND_URL(state, backgroundUrl) {
            state.backgroundUrl = backgroundUrl;
        },
        SET_ITEMS(state, items) {
            state.items = items
        },
        SET_TABBAR_ITEMS(state, items) {
            state.tabbarItems = items;
        },
        SET_TABBAR(state, tabbarElement) {
            state.tabbarElement = tabbarElement;
        },
        SET_TABBAR_ATTRIBUTE(state, attribute) {
            state.tabbarAttribute = attribute;
        },
        INSERT_TABBAR_ITEMS(state, { item, sit }) {
            item.hover = false
            state.tabbarItems.splice(sit, 0, item);
        },
        REMOVE_TABBAR_ITEMS(state, sit) {
            state.tabbarItems.splice(sit, 1);
        },
        
    },
    actions: {
        async init({ commit, dispatch }) {
            const req = await getConfig()
            let { tabbarItems, items, backgroundUrl } = req
            console.log(items)
            items = items.map(item => {
                item.imageUrl = import.meta.env.VITE_RESOURCE + 'desktop/icon?id=' + item.id;
                return item 
            })
            commit('SET_BACKGROUND_URL', backgroundUrl)
            commit('SET_ITEMS', items)
            commit('SET_TABBAR_ITEMS', tabbarItems)
            await dispatch('initTabbar')
        },
        initTabbar({state, commit}) {
            const tabbar = state.tabbarElement;
            const attribute = {
                container: tabbar.getBoundingClientRect(),
                items: [],
            };
            Array.from(tabbar.children).forEach((item) => {
                attribute.items.push(item.getBoundingClientRect());
            });
            tabbar.style.width = `${attribute.items.length * 82}px`;
            commit('SET_TABBAR_ATTRIBUTE', attribute)
        },
        upTabbar({ commit }) {
            commit('SWITCH_TABBAR_ACTIVE', true)
        },
        offTabbar({ commit }) {
            commit('SWITCH_TABBAR_ACTIVE', false)
            commit('SWITCH_LAUNCH_ACTIVE', false)
        },
        upDrag({ commit }) {
            commit('SWITCH_DRAG_ACTIVE', true)
        },
        offDrag({ commit }) {
            commit('SWITCH_DRAG_ACTIVE', false)
        },
    },
})
